.custom-control {
  padding-left: 0;
  &.custom-checkbox,
  &.custom-radio {
    padding-right: $farris-checkbox-radio-right-gutter;
    margin-bottom: $farris-checkbox-radio-bottom-gutter;
  }
  .custom-control-label {
    &::before {
      color: $farris-checkbox-border;
    }
    &:hover {
      cursor: pointer;
      &::before {
        color: $farris-checkbox-hover-text;
      }
    }
  }

  // 选中
  .custom-control-input:checked~.custom-control-label {
    &::before {
      color: $farris-checkbox-checked-text;
    }
  }
  // 只读
  .custom-control-input[readonly]~.custom-control-label {
    color: $farris-cr-readonly-text;

    &::before {
      color: $farris-cr-readonly-border;
    }

    &:hover {
      cursor: default;
    }
  }
  
  // 禁用
  .custom-control-input:disabled~.custom-control-label {
    color: $farris-cr-disabled-text;

    &::before {
      color: $farris-cr-disabled-border;
    }

    &:hover {
      cursor: default;
    }
  }
  // 选中禁用
  .custom-control-input[readonly]:checked~.custom-control-label,
  .custom-control-input[disabled]:checked~.custom-control-label {
    &::before {
      color: $farris-cr-checked-disabled-border;
    }
  }
}

.custom-control-input {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  opacity: 0;
}

.custom-control-label {
  padding-left: $f-custom-control-gutter;
  color: $farris-custom-control-color;
  display: inline;

  &::before {
    @include f-icon-extend('FarrisIcons', false);
    color: $farris-checkbox-border;
    font-size: 14px;
    line-height: 1;
    top: 2px;
    left: 0;
    top: 3px;
    left: 0;
    position: absolute;
  }

  &::after {
    display: none;
    content: '';
  }
}

.custom-checkbox {

  .custom-control-label {
    &::before {
      content: '\e304';
    }
  }
  .custom-control-input:checked~.custom-control-label {
    &::before {
      content: '\e305';
    }
  }
  .custom-control-input:indeterminate~.custom-control-label {
    &::before {
      font-family: 'FarrisIcons';
      content: '\e306';
      color: $farris-checkbox-checked-text;
    }
  }
}

.custom-radio {
  .custom-control-label {
    &::before {
      content: '\e309';
    }
  }
  .custom-control-input:checked~.custom-control-label {
    &::before {
      content: '\e30a';
    }
  }
}
